let form = layui.form
function fn() {
    $.ajax({
        type:'GET',
        url: '/admin/links',
        success: function (res) {
            console.log(res);
            if (res.status === 0) {
                let str = '';
                res.data.forEach(item => {
                  str += `
                  <tr>
                  <td>{${item.id}}</td>
                  <td>
                    <div class="bg">
                      <img src="http://localhost:8888/uploads/${item.linkicon}">
                    </div>
                  </td>
                  <td>{${item.linkname}}</td>
                  <td>{${item.linkurl}}</td>
                  <td>{${item.linkdesc}}</td>
                  <td>
                    <button data-id="{${item.id}}" type="button" class="layui-btn layui-btn-xs edit">
                      编辑
                    </button>
                    <button data-id="{${item.id}}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">
                      删除
                    </button>
                  </td>
                </tr>
                  `
                });
                $('tbody').html(str);
            };
          },
    })
};
fn();
// 删除
$('.layui-table tbody').on('click', '.delete', function (e) {
    // console.log(e);
    var id = $(e.target).data('id')
    layer.confirm('确定要删除吗', function (index) {
        $.ajax({
            type: 'DELETE',
            url: '/api/links' + id,
            success: function (res) {
                if (res.status === 0) {
                    layer.close(index);
                    fn();
                }  
            },
        })
    });
});

// 编辑友情链接
$('.layui-table tbody').on('click', '.edit', function (e) {
    var id = $(e.target).data('id')
    // 获取链接数据
    $.ajax({
      type: 'get',
      url: '/admin/links/' + id,
      success: function (res) {
        var index = layer.open({
          type: 1,
          title: '编辑友情链接',
          content: $('#edit-form-tpl').html(),
          area: ['500px', '350px']
        })
       
        $('#preIcon').attr('src', 'http://localhost:8888/uploads/' + res.data.linkicon)
     
        delete res.data.linkicon
        form.val('editForm', res.data)
        
     
        $('#urlIcon').click(function () {
          $('#linkFile').click()
        })
      
        let file = null
        $('#linkFile').change(function (e) {
          const objectURL = URL.createObjectURL(e.target.files[0])
          file = e.target.files[0]
          $('#preIcon').attr('src', objectURL)
        })

     
        $('#edit-form').submit(function (e) {
          e.preventDefault()
          var fd = new FormData(this)
          if (file) {
            fd.append('linkicon', file)
          }
          $.ajax({
            type: 'put',
            url: 'admin/links/' + id,
            data: fd,
            processData: false,
            contentType: false,
            success: function (res) {
              if (res.status === 0) {
                // 编辑成功
                  layer.close(index);
                  fn();
              }
            }
          })
        })
      }
    })
  })

  // 添加友情链接
  $('#add-link').click(function () {
    var index = layer.open({
      type: 1,
      title: '添加友情链接',
      content: $('#add-form-tpl').html(),
      area: ['500px', '350px']
    })
  
    $('#urlIcon').click(function () {
      $('#linkFile').click()
    })
  
    $('#linkFile').change(function (e) {
      const objectURL = URL.createObjectURL(e.target.files[0])
      $('#preIcon').attr('src', objectURL)
    })
 
    $('#add-form').submit(function (e) {
      e.preventDefault()
      var fd = new FormData(this)
      $.ajax({
        type: 'post',
        url: '/admin/links',
        data: fd,
        processData: false,
        contentType: false,
        success: function (res) {
          if (res.status === 0) {
            // 关闭窗口
              layer.close(index);
            // 刷新列表
              fn();
          }
        }
      })
    })
  })

